<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>首页</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>

    </style>
</head>

<body>
    <div class="app store-all" v-cloak>
        <!-- 头 -->s
        <div class="header-common">
            <div class="flex-x-s header">
                <span class="iconfont goback" @click="back">&#xe66f;</span>
                <div class="title flex-x-s">
                    {{storeInfo.shopName}}
                </div>
                <span class="iconfont goback" @click="search">&#xe71e;</span>
            </div>
            <div class="line"></div>
            <div class="orderby-tab">
                <div class="orderby-item flex-x-c"
                    v-for="(item,index) in listTab" :key="index" @click="selectCondition(item)">
                    <div :class="[{active:item.selected || item.secondSelected}]">{{item.name}}</div>
                    <div class="orderby-icon" v-if="item.name != '综合'">
                        <div class="iconfont" :class="item.selected && item.secondSelected?'active':''">&#xe610;</div>
                        <div class="iconfont" :class="item.selected && !item.secondSelected?'active':''">&#xe74d;</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script>
        apiready = function () {
            var aMap = api.require('aMap');
            vm = new Vue({
                el: '.app',
                data: {
                    storeInfo:api.pageParam.storeInfo,
                    listTab: [
                        {
                            name: '综合',
                            selected: true,
                            secondSelected:false,
                        }, {
                            name: '销量',
                            selected: false,
                            secondSelected:false,
                        },
                        {
                            name: '新品',
                            selected: false,
                            secondSelected:false,
                        }, {
                            name: '价格',
                            selected: false,
                            secondSelected:false,
                        }
                    ],
                    isShowCollapse: true
                },
                created() {},
                mounted() {
                    this.openFrame()
                },
                methods: {
                    selectCondition(item) {
                        if(item.name == '综合'){
                            item.selected = !item.selected
                            item.secondSelected = !item.secondSelected
                            vm.listTab.map(it=>{
                                if(item.name != it.name){
                                    it.selected = false
                                    it.secondSelected = false
                                }
                            })
                        }else{
                            if(item.selected){
                                item.secondSelected = !item.secondSelected
                            }else{
                                item.selected = true
                                item.secondSelected = true
                            }
                            vm.listTab.map(it=>{
                                if(item.name != it.name){
                                    it.selected = false
                                    it.secondSelected = false
                                }
                            })
                        }
                        api.sendEvent({
                            name: 'notice-all-baby',
                            extra: {
                                item: item
                            }
                        });
                    },
                    back() {
                        api.closeWin();
                    },
                    search() {
                        api.openWin({
                            name: 'search_win',
                            url: "../search/search_win.html",
                            pageParam: {
                                isHistory: false,
                                titlePlus: '店铺'
                            }
                        })
                    },
                    openFrame() {
                        var header = $api.dom('.header-common');
                        var headerH = $api.fixStatusBar(header);
                        api.openFrame({
                            name: 'all_baby_frm',
                            url: 'all_baby_frm.html',
                            rect: {
                                marginTop: headerH,
                                marginBottom: api.pageParam.footerH,
                                w: 'auto'
                            },
                            pageParam: {
                                headerH: headerH,
                                footerH: api.pageParam.footerH,
                                storeInfo:this.storeInfo
                            }
                        });
                    },
                },
            })
        }
    </script>
</body>

</html>